<template>
	<el-card>
		<el-form :inline="true" :model="queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-form-item>
					<el-input v-model="queryForm.code" placeholder="基类编码"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="code" label="基类编码" header-align="center" align="center"></el-table-column>
			<el-table-column prop="packageName" label="基类包名" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="fields" label="基类字段" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column prop="remark" label="备注" show-overflow-tooltip header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
					<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
    <el-pagination
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
    >
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
	</el-card>
</template>

<script setup>
import {reactive, ref, toRefs} from 'vue'
import {useBaseClassListApi,useBaseClassSubmitApi,listBaseClass,deleteBaseClass} from '@/api/generator/baseClass.js'
import AddOrUpdate from './add-or-update.vue'
import {deleteDataSource} from "@/api/generator/datasource";

const {proxy} = getCurrentInstance();
const queryForm = ref({})
const loading = ref(false)
const dataList = ref([])
const page = ref(0)
const pageSizes = ref([1, 10, 20, 50, 100, 200])
const limit = ref(0)
const total = ref(0)
const ids = ref([])

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
	},
	rules: {}
});
const {queryParams, form, rules} = toRefs(data);
function getDataList() {
  listBaseClass(data.queryParams).then(response=>{
		dataList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}


const addOrUpdateRef = ref()
const addOrUpdateHandle = (id) => {
	addOrUpdateRef.value.init(id)
}

function deleteBatchHandle(id) {
  let _ids = [id] || ids.value
  deleteBaseClass(_ids).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    getDataList();
  })
}

function selectionChangeHandle() {

}

function sizeChangeHandle(num) {
  data.queryParams.pageSize = num
  getDataList()
}

function currentChangeHandle(num) {
  data.queryParams.pageNum = num
  getDataList()
}
getDataList();
</script>
